<template>
	<view>
		<view class="flex-row list">
			<view class="tittle">
				<text class="red">*</text>
				投诉类型
			</view>
			 <picker mode="selector" :value="index" :range-key="'name'" :range="typelist" @change="bindChange">
			    <view >{{typelist[index].name}}</view>
			</picker>
			<!-- <picker mode="selector" :range="typelist" :value="index"  :range-key="'name'" @change="bindChange">
				<view>{{typelist[index].name}}</view>
			</picker> -->
		</view>
		<view class="flex-row list" >
			<view class="tittle">
				<text class="red">*</text>
				投诉主题
			</view>
			<input type="text" v-model="form.theme">
		</view>
		<view class="flex-row list">
			<view class="tittle"><text class="red"></text>图片求真</view>
			<view class="imagebox">
				<view v-for="(item,index) in imgUrlarr" class="imageup">
					<image :src="item" :key='index'  mode=""></image>
					<text @click="remove(index)">+</text>
				</view>
		
			</view>
			<!-- <input class="input" type="view" v-model="picture" placeholder="最多可上传9张" placeholder-class="placeholder" /> -->
			<view class="code" @click="ChooseImage">上传</view>
		</view>
		<view class="flex-row list" >
			<view class="tittle">
				<text class="red">*</text>
				投诉原因
			</view>
			
		</view>
		<view class="flex-row list" >
			<textarea value="" v-model="form.reason" placeholder="投诉原因" />
			
		</view>
		<button type="default" @click="report">提交</button>
	</view>
</template>

<script>
	import OSSUtil from '../../libs/ossUtil.js'
	export default{
		data(){
			return{
				index:0,
				imgUrlarr:[],
				typelist:[
					{id:1,name:'虚假1'},
					{id:2,name:'虚假2'},
					{id:3,name:'虚假3'},
				],
				form:{
					img:'',
					reason:'',
					theme:'',
					type:''
					
				}
			}
		},
		onLoad(option){
			this.form.theme = option.name
			this.gettype()
		},
		methods:{
			// 获取投诉类型
			gettype(){
				this.$http.get('/public/getComplainTypeList').then(res => {
					if (res.code == 0) {
					   this.typelist = res.data
					   this.form.type = this.typelist[0].name
					}
				})
			},
			//删除图片
			remove(index) {
				this.imgUrlarr.splice(index, 1)
			},
			report(){
				if(this.form.reason==''){
					uni.showToast({
						icon:'none',
						title:'请输入原因'
					})
					return
				}
				this.$http.post('/demand/complain', this.form).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title:res.msg,
							icon:"success",
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							
						})
					}
					
				})
			},
			bindChange(e){
				this.index = e.detail.value
				this.form.type = this.typelist[e.detail.value].name
				console.log(this.form.type)
			},
			async ChooseImage() {
				let files = await OSSUtil.getImage(); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息
			
				let imageSrc = files.tempFilePaths[0];
				let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
			
				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: 'image',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						let that = this
						console.log(sign.host + '/' + fileName)
						let img = sign.host + '/' + fileName
			
						this.imgUrlarr = this.imgUrlarr.concat(img)
						console.log(this.imgUrlarr)
						this.form.img = this.imgUrlarr.join(',')
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});
						that.$emit('imgUploaded', {
							data: sign.host + fileName,
							authId: this.authId
						});
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					console.log("上传进度" + res.progress);
					this.progress = res.progress;
				});
			
				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
		}
	}
</script>

<style scoped lang="scss">
	.list{
		padding: 20upx 24upx;
		background: #FFFFFF;
		border-bottom: 1px solid #efefef;
		textarea{
			width: 94%;
			margin: auto 0;
			border: 1px solid #efefef;
			padding: 20upx;
		}
		.tittle{
			width: 160upx;
			color: #555555;
			font-weight: 500;
			.red{
				display: inline-block;
				width: 20upx;
			}
		}
	}
	.imagebox {
		width: 390upx;
		
	
		.imageup {
			position: relative;
			width: 60upx;
			height: 60upx;
			display: inline-block;
			margin-right: 10upx;
	
			image {
				width: 60upx;
				height: 60upx;
				vertical-align: middle;
			
			}
	
			text {
				position: absolute;
				right: -10rpx;
				// display: none;
				top: 0rpx;
				width: 20rpx;
				height: 20rpx;
				font-size: 20rpx;
				text-align: center;
				color: white;
				cursor: pointer;
				line-height: 20rpx;
				border-radius: 100%;
				transform: rotate(45deg);
				background: rgba(0, 0, 0, 0.5);
			}
		}
	
	
	
		
	}
		
	button{
		width: 90%;
		margin: 50upx auto;
		background: rgba(253, 88, 10, 1);
		color: #FFFFFF;
	}
	
	.code {
		width: 104upx;
		height: 50upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(253, 88, 10, 1);
		border-radius: 8upx;
		font-size: 24upx;
		color: rgba(253, 88, 10, 1);
		text-align: center;
		line-height: 50upx;
	}
</style>
